<template>
	<div style="margin: 20px;">
                 
        <div>
            <ul>
                <li>
                    <Button type="primary" icon="plus-round" @click="openNewModal()">新建</Button>
                    <Button type="success" icon="wrench" @click="openModifyModal()">修改</Button>
                    <Button type="error" icon="trash-a" @click="del()">删除</Button>
                </li>
                <li>
                    <div style="padding: 10px 0;">
                    	<Table border :columns="columns1" :data="data1" :height="300" @on-selection-change="s=>{change(s)}" @on-row-dblclick="s=>{dblclick(s)}"></Table>                    
                    </div> 
                    
                </li>
                <li>
                    <div style="text-align: right;">
                        <Page :total="total" :page-size="pageInfo.pageSize" show-elevator show-total @on-change="e=>{pageSearch(e)}"></Page>
                    </div>  
                </li>
            </ul>
        </div>
        <!--添加modal-->  
         <Modal :mask-closable="false" :visible.sync="newModal" :loading = "loading" v-model="newModal" width="600" title="新建" @on-ok="newOk('lqrwnew')" @on-cancel="cancel()">
            <Form ref="lqrwnew" :model="lqrwnew" :rules="ruleNew" :label-width="80" >
                <Row>
                    <Col span="12">
                        <Form-item label="团队名称:" prop="team">
                            <Input v-model="lqrwnew.team" style="width: 204px"/>
                        </Form-item>
                    </Col>
                    <Col span="12">
                        <Form-item label="团队人数:" prop="num">
                            <Input v-model="lqrwnew.num" style="width: 204px"/>
                        </Form-item>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <Form-item label="工作时间" prop="time">
                            <Input v-model="lqrwnew.time" style="width: 204px"/>
                        </Form-item>
                    </Col>
                    <Col span="12">
                        <Form-item label="启动资金" prop="funds">
                            <Input v-model="lqrwnew.funds" style="width: 204px"/>
                        </Form-item>
                    </Col>
                </Row> <Row>
                    <!-- <Col span="12">
                        <Form-item label="负责人" prop="man">
                            <Input v-model="lqrwnew.man" style="width: 204px"/>
                        </Form-item>
                    </Col> -->
                    <Col span="12">负责人 <Select v-model="lqrwnew.man" filterable clearable style="width: 200px">
                        <Option v-for="item in selectList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                   
                </Col>
                </Row>
               
               
                
            </Form>
        </Modal> 
        <!--修改modal-->  
        <Modal :mask-closable="false" :visible.sync="loadw" :loading = "loading" v-model="loadw" width="600" title="修改" @on-ok="modifyOk('gai')" @on-cancel="cancel()">
            <Form ref="gai"    :label-width="80" >
               <!-- :model="gai" :rules="ruleModify" -->
                <Row>
                    <Col span="12">
                       <Form-item label="团队名称:" prop="team">
                            <Input v-model="gai.team" style="width: 204px"/>
                        </Form-item>
                    </Col>
                    <Col span="12">
                       <Form-item label="团队人数:" prop="num">
                            <Input v-model="gai.num" style="width: 204px"/>
                        </Form-item>
                    </Col>
                </Row>
                <Row>
                     <Col span="12">
                        <Form-item label="工作时间" prop="time">
                            <Input v-model="gai.time" style="width: 204px"/>
                        </Form-item>
                    </Col>
                    <Col span="12">
                        <Form-item label="启动资金" prop="funds">
                            <Input v-model="gai.funds" style="width: 204px"/>
                        </Form-item>
                    </Col>
                </Row>
                 </Row> <Row>
                   
                    <Col span="12">负责人 <Select ref="select" v-model="gai.man" filterable clearable style="width: 200px">
                        <Option v-for="item in selectList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                   
                </Col>
                </Row>
               
            </Form>
        </Modal> 
    </div>
</template>
<script>
export default {
    data(){
        return{
            id:null,
            count:null,
            groupId:null,
            newModal:false,
            modifyModal:false,
            loadw:false,
            total:0,
            loading:true,
            pageInfo:{
                page:0,
                pageSize:10
            },
            lqrw:{
                id:null,
                team:null,
                num:null,
                time:null,
                funds:null,
                man:null,
                 lqrwid:null
            },
            lqrwnew:{
                id:null,
                team:null,
                num:null,
                time:null,
                funds:null,
                man:null,
                lqrwid:null
            },
            gai:{
                id:null,
                team:null,
                num:null,
                time:null,
                funds:null,
                man:null,
                lqrwid:null
            },
             ruleNew:{
                    team: [
                        { type:'string',required: true, message: '输入团队名', trigger: 'blur' }
                    ],
                    num: [
                        { type:'string',required: true, message: '输入人数', trigger: 'blur' }
                    ],
                      time: [
                        { type:'string',required: true, message: '输入时间', trigger: 'blur' }
                    ],
                      funds: [
                        { type:'string',required: true, message: '输入资金数目', trigger: 'blur' }
                    ],
                       id: [
                        { type:'int',required: true, message: '输入id', trigger: 'blur' }
                    ],
                    
                   
                   
                },
                 ruleModify:{
                     team: [
                        { type:'string',required: true, message: '输入团队名', trigger: 'blur' }
                    ],
                    num: [
                        { type:'string',required: true, message: '输入人数', trigger: 'blur' }
                    ],
                      time: [
                        { type:'string',required: true, message: '输入时间', trigger: 'blur' }
                    ],
                      funds: [
                        { type:'string',required: true, message: '输入资金数目', trigger: 'blur' }
                    ],
                     id: [
                        { type:'int',required: true, message: '输入id', trigger: 'blur' }
                    ],
                   
                },
            // lqrwNew:{
            //     id:null,
            //     team:null,
            //     num:null,
            //     time:null,
            //     funds:null,
            //     man:null
            // },

            lqrwList:[],
            selectList:[],
            columns1:[
                {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '团队编号',
                        key: 'id'
                    },
                    {
                        title: '团队名称',
                        key: 'team'
                    },
                    {
                        title: '团队人数',
                        key: 'num'
                    },
                    {
                        title: '工作时间',
                        key: 'time'
                    },
                    {
                        title: '启动资金',
                        key: 'funds'
                    },
                    {
                        title: '负责人',
                        key: 'man'
                    }
            ],
            data1:[]

        }
    },
    mounted(){
        var _this = this;
        this.getTable({
            "pageInfo":this.pageInfo,
            'id':this.id
        });  

        this.axios({
            method:'get',
            url:'/select',

        }).then(function (response){
       
            var listTemp = response.data;
            for(var i = 0; i < listTemp.length;i++){
                _this.selectList.push({
                    "value": listTemp[i].lqrwid,
                    "label":listTemp[i].man
                })
            }
        })
       
    },
    methods:{
        initPageInfo(){
            this.pageInfo.page = 0;
            this.pageInfo.pageSize = 10;
        
    },
    initlqrw(){
        this.lqrw.id = null;
        this.lqrw.team = null;
        this.lqrw.num = null;
        this.lqrw.time = null;
        this.lqrw.funds = null;
        this.lqrw.man = null;
    },
    initlqrwnew(){
        this.lqrwnew.id = null;
        this.lqrwnew.team = null;
        this.lqrwnew.num = null;
        this.lqrwnew.time = null;
        this.lqrwnew.funds = null;
        this.lqrwnew.man = null;
    },
    initgai(){
        this.gai.id = null;
        this.gai.team = null;
        this.gai.num = null;
        this.gai.time = null;
        this.gai.funds = null;
        this.gai.man = null;
    },
    lqrwSet(e){
       
        this.lqrw.id = e.id;
         this.lqrw.team = e.team;
          this.lqrw.num = e.num;
           this.lqrw.time = e.time;
            this.lqrw.funds = e.funds;
             this.lqrw.man = e.man;
    },
    lqrwnewSet(e){
       
        this.lqrwnew.id = e.id;
         this.lqrwnew.team = e.team;
          this.lqrwnew.num = e.num;
           this.lqrwnew.time = e.time;
            this.lqrwnew.funds = e.funds;
             this.lqrwnew.man = e.man;
    },
    gaiset(e){
       
        this.gai.id = e.id;
         this.gai.team = e.team;
          this.gai.num = e.num;
           this.gai.time = e.time;
            this.gai.funds = e.funds;
             this.gai.man = e.man;
    },
    //得到表数据
    getTable(e) {
        this.initgai();
        this.axios({
            method:'get',
            url:'/getlqrw',
            params:{
                'page':e.pageInfo.page,
                'pageSize':e.pageInfo.pageSize,
                'id':e.id
            }
        }).then(function (response){
            this.data1 = response.data.data;
            this.total = response.data.totalCount;
        }.bind(this)).catch(function (error){
            alter(error);
        });
    },
    pageSearch(e){
        this.pageInfo.page = e-1;
        this.getTable({
            "pageInfo":this.pageInfo,
            'id':this.id
        });
    },
    //cancel点击事件
     cancel () {
                this.$Message.info('点击了取消');
            },
 
   
    //table选择后触发事件
        change(e){
     
        if(e.length==1){
            this.gaiset(e['0']);
            
        }
        this.setGroupId(e);              
    },
       /*通过选中的行设置groupId的值*/
     setGroupId(e){
        this.groupId=[];
        this.count=e.length;
        for (var i = 0; i <= e.length - 1; i++) {
            this.groupId.push(e[i].id);
        }
    },
    //初始化加载
    openNewModal(){
        this.newModal = true;
        this.initlqrw();
        this.data1.sort();
        this.count = 0;
        this.groupId = null;
        
       
    },
    //新增
    newOk(lqrwnew){
        this.$refs[lqrwnew].validate((valid)=>{
          
            if(valid){
                this.initlqrw();
                this.lqrwSet(this.lqrwnew);
                
                this.axios({
                    method:'post',
                    url:'/insertlqrw',
                    data:this.lqrw
                }).then(function (response){
                    this.initlqrwnew();
                    this.initgai();
                    this.getTable({
                        "pageInfo":this.pageInfo,
                        'id':this.id
                    });
                    this.$Message.info('新建成功');
                  
                }.bind(this)).catch(function (error){
                    alert(error);
                });
                this.newModal = false;
            }else {
                setTimeout(()=>{
                    this.loading = false;
                  this.$newxTick(()=>{
                    this.loading = true;
                
              
                });
            },1000);
        }
        })
    },
    //回显
    repalce(){
               
                this.initgai();
                var _this = this;
                this.axios({
                          method: 'post',
                          url: '/loadw',
                          data: this.groupId

                        }).then(function (response) {
                            
                           _this.gaiset(response.data)
                        
                        }) 
            },
        //判断勾选了几行
        openModifyModal(){    
          
                if(this.count > 1 || this.count < 1){
                    this.loadw= false; 
                    this.$Message.warning('请至少选择一项(且只能选择一项)');  
                }else{
                    this.loadw = true;
                  this.repalce();
                     
                }
            },
    //修改
    modifyOk(gai){
        this.$refs[gai].validate((valid) => {
      
               if(valid){
                   this.axios({
                       method:'put',
                       url:'updatelqrw',
                       data: this.gai
                   }).then(function (response){
                     
                       this.gaiset(this.gai)
                       this.getTable({

                            "pageInfo":this.pageInfo,
                                'id':this.id
                       });
                        this.$Message.info('修改成功');                    
                   }.bind(this)).catch(function (error){
                       alert(error);
                   });
                   this.loadw = false;

               }else {
                        this.$Message.error('表单验证失败!');
                        setTimeout(() => {
                            this.loading = false;
                            this.$nextTick(() => {
                                this.loading = true;
                            });
                        }, 1000);
                    }
    })
    },
     del(){
               
                if(this.groupId!=null && this.groupId!=""){
                    this.axios({
                      method: 'delete',
                      url: '/deletelqrw',
                      data: this.groupId
                    }).then(function (response) {
                        this.getTable({
                            "pageInfo":this.pageInfo,
                            'id':this.id
                        });
                        this.groupId=null;
                        this.count=0;
                        this.$Message.info('删除成功');
                    }.bind(this)).catch(function (error) {
                        alert(error);
                    });
                }
            },
        dblclick(e){
                this.gaiset(e);
               
                this.loadw = true;
                this.data1.sort();
            }
    
    }
}
</script>